<template>
  <view class="detail-page">
    <!-- 商品基本信息 -->
    <view class="info-card">
      <view class="info-header">
        <text class="goods-name">{{ goods.name }}</text>
        <text :class="['stock-tag', goods.stock <= goods.warningStock ? 'warning' : '']">
          库存: {{ goods.stock }}
        </text>
      </view>
      
      <view class="info-row">
        <text class="label">进价</text>
        <text class="value">¥{{ goods.purchasePrice }}</text>
      </view>
      
      <view class="info-row">
        <text class="label">分类</text>
        <text class="value">{{ goods.category?.name || '-' }}</text>
      </view>
      
      <!-- <view class="info-row">
        <text class="label">销售价</text>
        <text class="value">¥{{ goods.salePrice || '-' }}</text>
      </view> -->
      
      <view class="info-row">
        <text class="label">公司</text>
        <text class="value">{{ goods.supplier?.name || '-' }}</text>
      </view>
    </view>

    <!-- 预警值设置 -->
    <view class="warning-card">
      <view class="warning-header">
        <text class="title">库存预警</text>
        <text class="subtitle">当库存低于预警值时会显示预警标记</text>
      </view>
      
      <uni-forms ref="formRef" :modelValue="formData">
        <uni-forms-item label="预警值" required name="warningStock">
          <uni-number-box 
            v-model="formData.warningStock"
            :min="0"
          />
        </uni-forms-item>
      </uni-forms>
    </view>

    <!-- 底部按钮 -->
    <view class="footer">
      <button class="submit-btn" @tap="handleSubmit">保存设置</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { goodsApi } from '@/api/goods'

const goods = ref({})
const formData = ref({
  warningStock: 0
})

// 获取商品详情
const getGoodsDetail = async (id) => {
  try {
    const res = await goodsApi.getDetail(id)
    goods.value = res
    formData.value.warningStock = res.warningStock
  } catch (error) {
    console.error('获取商品详情失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'error'
    })
  }
}

// 处理提交
const handleSubmit = async () => {
  try {
    await goodsApi.update(goods.value.id, {
      warningStock: formData.value.warningStock
    })
    
    uni.showToast({
      title: '设置成功',
      icon: 'success'
    })
    
    // 更新本地数据
    goods.value.warningStock = formData.value.warningStock
  } catch (error) {
    console.error('更新预警值失败:', error)
    uni.showToast({
      title: '设置失败',
      icon: 'error'
    })
  }
}

// 页面加载时获取商品ID
onLoad((options) => {
  if (options.id) {
    getGoodsDetail(options.id)
  }
})
</script>

<style>
.detail-page {
  padding: 32rpx;
  padding-bottom: calc(32rpx + 140rpx); /* 为底部按钮留出空间 */
  min-height: 100vh;
  box-sizing: border-box;
  background: #F3F4F6;
}

.info-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.goods-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #1F2937;
}

.stock-tag {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  background: #E5E7EB;
  color: #4B5563;
  font-size: 24rpx;
}

.stock-tag.warning {
  background: #FEF2F2;
  color: #DC2626;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.label {
  color: #6B7280;
  font-size: 28rpx;
}

.value {
  color: #1F2937;
  font-size: 28rpx;
}

.warning-card {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
}

.warning-header {
  margin-bottom: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1F2937;
  margin-bottom: 8rpx;
  display: block;
}

.subtitle {
  font-size: 24rpx;
  color: #6B7280;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FFFFFF;
  padding: 32rpx;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  background: #1890ff;
  color: #FFFFFF;
  border-radius: 8rpx;
  font-size: 28rpx;
  height: 76rpx;
  line-height: 76rpx;
}

.submit-btn:active {
  background: #096dd9;
}
</style> 